<template>
  <div class="page page-enai2">
    <!-- 背景 -->
    <div class="container-bg"><img src="@/assets/bg_enai_text.jpg" class="bg"></div>
    <!-- ui组 -->
    <div class="container-ui-group">
      <!-- 文本框 -->
      <textarea id="" v-model="textBody" class="container-text" contenteditable="true" type="text" />
      <!-- <input v-model="textBody" type="text" class="container-text"> -->
      <!-- 下一步按钮 -->
      <div v-show="showBtn" class="container-btn-next" @click="routerLink('enai3')"><img src="@/assets/btn_next.png" class="next"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textBody: '',
      showBtn: false
    }
  },
  watch: {
    textBody() {
      this.$store.dispatch('app/text', this.textBody)
        .then(() => {
          console.log('照片上传成功')
          this.showBtn = true
        })
        .catch(() => {
          console.log('照片上传失败')
        })
    }
  },
  mounted() {
    document.addEventListener('touchstart', function(event) {
      if (event.touches.length > 1) {
        event.preventDefault()
      }
    })
    var lastTouchEnd = 0
    document.addEventListener('touchend', function(event) {
      var now = (new Date()).getTime()
      if (now - lastTouchEnd <= 300) {
        event.preventDefault()
      }
      lastTouchEnd = now
    }, false)
  },
  methods: {
    routerLink(router) {
      this.$router.goTo(this, router)
    }
  }
}
</script>

<style lang="less">
.page-enai2 {
  .container-ui-group {
    width: 56%;
    position: absolute;
    top: calc(61vw);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    .container-text {
      -webkit-user-select:auto;
      width: 100%;
      height: calc(52vw);
      outline: 0;
      border: 0;
      font-size: 20px;
    }
    .container-btn-next {
      margin-top: calc(25vw)
    }
  }
}
</style>
